<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
  <style type="text/css">
  	body {
  		width: 100%;
  		height: 100%;
  		margin: 0;
  		padding: 0;
  	}
  	html {
  		width: 100%;
  		height: 100%;
  	}

  	#map {
  		height: 100%;
  		width: 100%;
  	}
  </style>
</head>
<body>
	<div id="map"></div>
	<script>

		L.TileLayer.ChartLayer = L.TileLayer.extend({
			initialize: function(url, options) {
				options= L.setOptions(this, options);
				//默认错误瓦片地址
				//options.errorTileUrl = L.Config._MAP_BGIMG_URL;
				var tempurl = L.Config._MAP_PCBGIMG_URL[Math.floor(Math.random()*L.Config._MAP_PCBGIMG_URL.length)];
				this.url = tempurl + "{s}/{x}.png"; 
				L.TileLayer.prototype.initialize.call(this,this.url, options);
			}
		});

		L.TileLayer.ChartLayer.prototype.getTileUrl = function(tilePoint) { 
			return L.Util.template(this._url, L.extend({
				s: function() {
					var zl = tilePoint.z;
					var ty = tilePoint.y;
					var dir = "",levDir = "",rowDir = ""; 
					if (zl < 2) {
						levDir= "LN" + (zl).toString(); 
					} else if (zl < 12) {
						levDir= "L0" + (zl - 2).toString(); 
					} else {
						levDir= "L" + (zl - 2).toString(); 
					}
					rowDir= "R" + L.tileLayer.getHexString(ty); dir= levDir + "/" + rowDir;
					return dir;
				},
				x: "C" + L.tileLayer.getHexString(tilePoint.x) 
			}));
 		};

		L.tileLayer.getHexString = function(value) { 
			var strHex = value.toString(16);
			switch (strHex.length) {
				case 1:
					strHex = "0000000" + strHex; 
					break;
				case 2:
					strHex = "000000" + strHex; 
					break;
				case 3:
					strHex = "00000" + strHex; 
					break;
				case 4:
					strHex = "0000" + strHex; 
					break;
				case 5:
					strHex = "000" + strHex; 
					break;
				case 6:
					strHex= "00" + strHex; 
					break;
				case 7:
					strHex = "0" + strHex; 
					break;
				default: 
			}
			return strHex; 
		};

		L.tileLayer.ChartLayer = function(url, options) {
			return new L.TileLayer.ChartLayer(url, options); 
		};
		L.Config = {
			"_MAP_PCBGIMG_URL" : ["http://emap.shipdt.com/"],
		};
		let url = "http://emap.shipdt.com/";
		var map = L.map('map', {
    		center: [34.910933,122.76702],
    		zoom: 8
		});
		let chartLayer = new L.tileLayer.ChartLayer("", {
                    maxZoom: 18,
                    minZoom: 2,
                    continuousWorld: true,
                    id: 'chart'
                });
        L.Util.setOptions(map, {
            crs: L.CRS.EPSG3395
				});

		map.addLayer(chartLayer);
	</script>
</body>
</html>